<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>张翊文的读书笔记</title>
    <link rel="shortcut icon" href="images/Books.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
    <!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>

<body>
    <audio src="music/Inuyasha.mp3" id="audio" autoplay loop></audio>
    <img src="images/music.png" alt="" id="music" />
    <div class="container">
        <header>
            <h1>
                <span>读书笔记</span>
            </h1>
            <h2>Swatch Book with CSS3 &amp;jQuery</h2>
            <div class="support-note">
                <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
                <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
                <span class="note-ie">Sorry, only modern browsers.</span>
            </div>
        </header>
        <section class="main">
            <div id="sb-container" class="sb-container">
                <!-- 笔记列表 -->
                <div>
                    <span class="sb-icon icon-bag" data-link="JS.html"></span>
                    <h4>
                        <span>JS高级</span>
                    </h4>
                </div>
                <div>
                    <span class="sb-icon icon-cog" data-link="Vue2.5.html"></span>
                    <h4>
                        <span>Vue</span>
                    </h4>
                </div>
                <div>
                    <span class="sb-icon icon-video" data-link="live.html"></span>
                    <h4>
                        <span>H5与小程序直播开发</span>
                    </h4>
                </div>
                <!-- 笔记本封面 -->
                <div id="note">
                    <h4>
                        <span>笔记本</span>
                    </h4>
                    <span class="sb-toggle">点击每个书签图标进入当前笔记</span>
                    <h5>
                        <span>点击 &hearts; 开启/关闭</span>
                    </h5>
                </div>
            </div>
            <!-- sb-container -->
        </section>
    </div>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.swatchbook.js"></script>
    <script type="text/javascript">
        $(function () {
            var thisLink = 'https://evanzhang1994.gitee.io/reading_notes/';
            var bookList = $('#sb-container');
            var music = $('#music');
            var audio = $('#audio')
            var contentBox = $('#sb-container');
            var tipsNumber = contentBox.children().length;
            var isPausedSelf=false;
            if (!IsPC()) {
                $('.main').css('margin', '25vh auto')
            }
            //图标
            var arr=[
                'icon-cog','icon-camera','icon-mobile','icon-download',
                'icon-video','icon-picture','icon-globe','icon-bag',
                'icon-install','icon-eye','icon-flight'
            ]
            $('#sb-container').swatchbook({
                // number of degrees that is between each item
                angleInc: 40,
                neighbor: 15,
                // if it should be closed by default
                initclosed: true,
                // index of the element that when clicked, triggers the open/close function
                // by default there is no such element
                closeIdx: tipsNumber - 1
            });
            //点击头部进入笔记
            contentBox.on('click', 'span', function () {
                if ($(this).data('link')) {
                    // window.location.href = thisLink + $(this).data('link')
                    window.open(thisLink + $(this).data('link'));  
                }
            })
            // 点击图标播放暂停音乐
            music.click(function () {
                if ($(this).css('animationPlayState') == 'running') {
                    audio[0].pause()
                    $(this).css('animationPlayState', 'paused') 
                    isPausedSelf=true;  
                } else {
                    audio[0].play();
                    $(this).css('animationPlayState', 'running') 
                }
            })
            // iphone自动播放兼容
            $("html").one('touchstart', function () {
                if(!isPausedSelf){
                    audio[0].play();
                }        
            });
            //兼容chrome等浏览器无交互禁止播放问题，用户点击页面开始播放
            document.addEventListener('click',function () { 
                //当不是手动暂停的都让他播放音乐
                if(!isPausedSelf){
                    audio[0].play();
                }
            })
            
            //--创建页面监听，等待微信端页面加载完毕 触发音频播放
            document.addEventListener('DOMContentLoaded', function () {
                function audioAutoPlay() {
                    var audio = document.getElementById('audio');
                    audio.play();
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        audio.play();
                    }, false);
                }
                audioAutoPlay();
            });
            //判断是否是PC
            function IsPC() {
                var userAgentInfo = navigator.userAgent;
                var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"
                ];
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            }
        });
    </script>

</body>

</html>